<template>
    <van-popup v-if="isShow" v-model="isShow" closeable round position="bottom" style="">
        <!-- 套一个小的略小的div 适配滚动条和外圈的圆角 -->
        <div class="popup-container">

            <van-row align="center" class="margin-top-more margin-bottom">
                <!-- <van-col>{{weightsResult.name}}}</van-col> -->
                <van-col span="22">{{weightsResult.name}}</van-col>
            </van-row>

            <template>
                <van-sidebar v-model="sidebarActiveKey" class="setting-sidebar-group">
                    <van-sidebar-item title="攻击类1" />
                    <van-sidebar-item title="攻击类2" />
                    <van-sidebar-item title="辅助类" />
                    <van-sidebar-item title="防御类" />
                </van-sidebar>

                <div class="setting-sliders-div">
                    <template v-for="(item, index) in weightsResult.data">
                        <van-row v-show="item.type == sidebarActiveKey + 1" class="border-top">

                            <van-col span="6" >
                                <!-- @mouseover.native="onAffixMouseOver(item)" @mouseout.native="onAffixMouseOut" -->
                                <van-image height="25" width="25" :src="item.icon"></van-image>
                                <label>{{ item.name }}</label>
                            </van-col>

                            <!-- 滑块 -->
                            <van-col span="13" offset="1" class="setting-slidercol">
                                <van-slider max="1" min="0" step="0.05" bar-height="4px" v-model="item.weight" disabled>
                                    <template #button>
                                        <div class="setting-sliders-custom-button"></div>
                                    </template>
                                </van-slider>
                            </van-col>
                            <van-col offset="1">{{ item.weight }}</van-col>
                        </van-row>
                    </template>
                </div>
            </template>

            <van-row class="remark margin-top">
                <van-col span="1">&nbsp;</van-col>
                <!-- weightsResult.remark -->
                <van-col span="22" v-if="weightsResult.remark">{{weightsResult.remark}}</van-col>
            </van-row>
        </div>
    </van-popup>
</template>

<script>
import { Toast, Notify } from 'vant';
let vm;

export default {
    name: 'WeightsView',
    props: {
        affixList: Array,
        affixOptions: Object,
        weightsResult: Object,
        isWeightsViewShow: Boolean,
    },

    created() {
        vm = this;

        // if (this.affixList) {
        //     this.weightsResult_test = JSON.parse(JSON.stringify(this.affixList));//克隆对象
        // }
    },

    computed: {
        isShow: {
            get() {
                return this.isWeightsViewShow;
            },
            set() {
                return this.$emit("close");
            }
        }
    },


    filters: {

    },

    data() {
        return {
            weightsResultLis: null,
            sidebarActiveKey: 0,

        }
    },

    methods: {

    }
}

</script>

<style scoped>
.popup-container {
    padding-left:20px;
    width: 480px;
    height: 350px;
    overflow: hidden;
}


.setting-sidebar-group {
  float: left;
  /* margin-top:30px; */
}

.setting-sidebar-group .van-sidebar-item {
  background-color: rgb(240, 240, 240);
}

.setting-sidebar-group .van-sidebar-item--select {
  background-color: rgb(215, 215, 215);
}

.setting-sliders-div {
  height: 300px;
  width: 385px;
  float: left;
  border: 1px solid rgb(215, 215, 215);
  overflow-y: scroll;
  overflow-x: hidden;
}

.setting-sliders-div {
  height: 238px;
}

.setting-sliders-div .van-row .van-col {
  height: 35px;
  line-height: 35px;
}

.setting-sliders-div .van-slider {
  position: relative;
  top: 40%;
  left: -10px;
}

.setting-sliders-div label {
  display: inline-block;
  position: relative;
  top: -7px;
  height: 30px;
  line-height: 30px;
}

.setting-sliders-custom-button {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.remark{
    padding-top:20px;
}
</style>